<template>
  <div>
    <van-nav-bar
        title="汪汪粮记录"
        left-arrow
        @click-left="onClickLeft"
    />
    <div v-if="recordList==''" style="color: #666666;font-size: 14px;margin-top: 30px">
      暂无记录，快去完成任务领汪汪粮吧！！！
    </div>
    <div v-for="item in recordList">
      <div class="task-item">
        <div class="task-icon">
          <img src="https://acai-reading.oss-cn-beijing.aliyuncs.com/%E7%8B%97%E7%B2%AE.png" style="width: 40px;height: 40px;border-radius: 50%">
        </div>
        <div class="task-content">
          <div class="task-name">{{item.record}}</div>
          <div class="task-desc">{{item.createTime}}</div>
        </div>
        <div class="task-reward">
          <div class="reward-amount">+{{item.number}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      recordList:[],
      user:{}
    }
  },
  methods:{
    findAll(){
      axios.post("http://localhost:9999/api-task/shellRecord/findAll?userId="+this.user.id).then(res=>{
        this.recordList=res.data
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
  },
  created(){
    this.user = JSON.parse(localStorage.getItem("user"))
    this.findAll();
  }
}
</script>


<style scoped>
.task-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  margin: 0 15px;
}

.task-content {
  flex: 1;
  margin: 0 12px;
}

.task-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.task-desc {
  color: #999;
  font-size: 12px;
}

.task-reward {
  text-align: right;
}

.reward-amount {
  color: #ff6034;
  font-weight: bold;
  margin-bottom: 4px;
}
</style>
